<template>
  <div>
    <div v-if="!flag"
         class="bindBox">
      <div class="line">
        <span class="tt b">手机</span>
        <input class="inp"
               type="text"
               placeholder="请输入手机号码"
               v-model="phone"
               name=""
               id="" />
      </div>
      <div class="line">
        <span class="tt b">验证码</span>
        <input class="inp"
               type="text"
               placeholder="请输入验证码"
               v-model="code" />
        <button class="btn"
                @click="getCode"
                :class="{ disable: countGetCode > 0 }">
          {{ countGetCode <= 0 ? '获取验证码' : `${countGetCode}秒后再次获取` }}
        </button>
      </div>
      <div @click="toBind"
           class="bind">绑定
      </div>
    </div>
    <div v-else>
      <div v-if="step == '1'">
        <div class="bindBox changeBox">
          <div class="htt">原绑定手机号验证</div>
          <div class="line">
            <span class="tt c">原手机号码</span>
            <input class="inp"
                   type="text"
                   disabled
                   placeholder="请输入手机号码"
                   v-model="userInfo.phone" />
          </div>
          <div class="line">
            <span class="tt c">验证码</span>
            <input class="inp"
                   type="text"
                   placeholder="请输入验证码"
                   v-model="old_verifycode" />
            <button class="btn"
                    @click="getCode"
                    :class="{ disable: countGetCode > 0 }">
              {{
              countGetCode <= 0 ? '获取验证码' : `${countGetCode}秒后再次获取`
              }}
            </button>
          </div>
          <div @click="next"
               class="bind">下一步
          </div>
        </div>
      </div>
      <div v-else-if="step == '2'">
        <div class="bindBox changeBox">
          <div class="htt">绑定新手机号</div>
          <div class="line">
            <span class="tt c">新手机号码</span>
            <input class="inp"
                   type="text"
                   placeholder="请输入手机号码"
                   v-model="new_phone"
                   @change="newPChange" />
          </div>
          <div class="line">
            <span class="tt c">验证码</span>
            <input class="inp"
                   type="text"
                   placeholder="请输入验证码"
                   v-model="new_verifycode" />
            <button class="btn"
                    @click="getCode"
                    :class="{ disable: countGetCode > 0 }">
              {{
              countGetCode <= 0 ? '获取验证码' : `${countGetCode}秒后再次获取`
              }}
            </button>
          </div>
          <div @click="toReBind"
               class="bind">绑定
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      phone: '',
      code: '',
      countGetCode: 0,
      checkPhone: /^1\d{10}$/,
      timer: null,
      form: '',
      flag: false,
      step: '1',
      old_verifycode: '',
      old_verifycode_id: '',
      new_verifycode: '',
      new_verifycode_id: '',
      new_phone: ''
    };
  },
  created() {
    if (this.$route.query && this.$route.query.form) {
      this.form = this.$route.query.form;
    }
    if (this.$route.query && this.$route.query.changePhone) {
      this.flag = true;
      this.phone = this.userInfo.phone;
      document.title = '更换手机';
    }
  },
  methods: {
    next() {
      if (!this.old_verifycode_id) {
        return this.$notify('请先获取验证码');
      }
      if (!this.old_verifycode) {
        return this.$notify('请输入验证码');
      }
      if (this.step == '1') {
        this.http.$post('api/user/verify_phone_code', {
          verifycode_id: this.old_verifycode_id,
          verifycode: this.old_verifycode
        }).then(res=>{
            this.step = '2';
            this.countGetCode = 0;
            clearInterval(this.timer);
            this.timer = null;
        }).catch(err=>{
            if(+err.code===10015){
                this.$notify('验证码错误，请检验重新输入')
            }else{
                this.$notify(err.msg)
            }
        })
      }
    },
    newPChange() {
      if (this.timer) clearInterval(this.timer);
      this.timer = null;
      this.countGetCode = 0;
    },
    getCode() {
      if (this.countGetCode > 0) return;
      if (this.step === '2') {
        if (!this.checkPhone.test(this.new_phone)) {
          return this.$notify('请输入正确的手机号');
        }
      } else {
        if (!this.checkPhone.test(this.phone)) {
          return this.$notify('请输入正确的手机号');
        }
      }

      this.http
        .$post('api/user/get_phone_code', {
          phone: this.step == '2' ? this.new_phone : this.phone
        })
        .then(res => {
          this.countGetCode = 60;
          this.timer = setInterval(() => {
            this.countGetCode--;
            if (this.countGetCode <= 0) {
              this.countGetCode = 0;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
          //   console.log(res)
          if (!this.flag) {
            this.verifycode_id = res.verifycode_id;
          } else {
            this.step == '1' && (this.old_verifycode_id = res.verifycode_id);
            this.step == '2' && (this.new_verifycode_id = res.verifycode_id);
          }
        })
        .catch(this.$err);
    },
    toReBind() {
      if (!this.checkPhone.test(this.new_phone)) {
        return this.$notify('请输入正确的手机号');
      }
      if (!this.new_verifycode_id) {
        return this.$notify('请先获取验证码');
      }
      if (!this.new_verifycode) {
        return this.$notify('请输入验证码');
      }
      this.http
        .$post('api/user/change_bind_phone', {
          uid: this.userInfo.uid,
          old_verifycode: this.old_verifycode,
          old_verifycode_id: this.old_verifycode_id,
          verifycode: this.new_verifycode,
          verifycode_id: this.new_verifycode_id,
          new_phone: this.new_phone
        })
        .then(res => {
          // console.log(res);
          this.$notify({
            type: 'success',
            background: '#07c160',
            duration: 1500,
            message: '更改绑定成功'
          });
          this.util
            .getUserInfoApi()
            .then(() => {
              this.$router.push(this.form || '/');
            })
            .catch(console.log);
        })
        .catch(this.$err);
    },
    toBind() {
      if (!this.checkPhone.test(this.phone)) {
        return this.$notify('请输入正确的手机号');
      }
      if (!this.verifycode_id) {
        return this.$notify('请先获取验证码');
      }
      if (!this.code) {
        return this.$notify('请输入验证码');
      }
      this.http
        .$post('api/user/bind_phone', {
          uid: this.userInfo.uid,
          verifycode: this.code,
          verifycode_id: this.verifycode_id,
          phone: this.phone
        })
        .then(res => {
          // console.log(res);
          this.$notify({
            type: 'success',
            background: '#07c160',
            duration: 1500,
            message: '绑定成功'
          });
          this.code = '';
          this.verifycode_id = '';
          this.phone = '';
          this.countGetCode = 0;
          clearInterval(this.timer);
          this.timer = null;
          this.util
            .getUserInfoApi()
            .then(() => {
              this.$router.push(this.form || '/');
            })
            .catch(console.log);
        })
        .catch(this.$err);
    }
  }
};
</script>
<style lang="less" scoped>
.htt {
  margin-bottom: 1.22rem;
  height: 1.16rem;
  font-size: 1.19rem;
  text-align: center;
  font-weight: bold;
  color: rgba(23, 23, 23, 1);
  line-height: 1rem;
}

.bindBox {
  margin: 2.59rem 1.06rem;
  .line {
    position: relative;
    border-bottom: 1px solid rgba(237, 236, 240, 1);
    .tt {
      display: inline-block;
      height: 1rem;
      font-size: 1rem;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 0.71rem;
    }
    .b {
      width: 3rem;
      margin: 1.31rem 1.5rem 1.31rem 0;
    }
    .c {
      width: 5rem;
      margin: 1.31rem 1.5rem 1.31rem 0;
    }
    .inp {
      ::placeholder {
        width: 5.22rem;
        height: 0.84rem;
        font-size: 0.88rem;
        font-weight: 400;
        color: rgba(200, 200, 200, 1);
        line-height: 0.71rem;
      }
    }
    .btn {
      position: absolute;
      right: 0.5rem;
      top: 0.81rem;
      min-width: 5.75rem;
      height: 1.94rem;
      padding: 0 0.69rem;
      font-size: 0.88rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 0.71rem;
      background: rgba(255, 134, 17, 1);
      border-radius: 0.25rem;
    }
    .btn.disable {
      background-color: #ccc;
    }
  }
  .bind {
    margin-top: 2.81rem;
    width: 21.44rem;
    height: 2.81rem;
    line-height: 2.81rem;
    background: rgba(255, 134, 17, 1);
    border-radius: 1.4rem;
    color: rgba(255, 255, 255, 1);
    font-size: 1.13rem;
    text-align: center;
  }
}

.changeBox {
  margin: 1.22rem 1.06rem;
}
</style>
